<template>
  <view class="container" v-if="isShow">
    <view class="header"> </view>
    <view class="mids boxS" id="payDep">
      <view class="m-head">剩余支付时间</view>
      <flipClock :waittimer="waittimer"></flipClock>
      <view class="mid-ds">
        <view class="mid-item">
          <view>时</view>
        </view>

        <view class="mid-item">
          <view>分</view>
        </view>
        <view class="mid-item">
          <view>秒</view>
        </view>
      </view>
    </view>
    <view class="boxS jine">
      <view class="headerss">金额合计</view>
      <view class="aaa"
        >￥<text style="color: #333333; font-size: 54rpx">{{
          deposit_amount
        }}</text
        >元</view
      >
    </view>
    <view class="payDate boxS">
      <view class="p-head">选择支付方式</view>
      <view class="pay-mind">
        <radio-group @change="radioChange">
          <label>
            <view class="radio-item">
              <view class="left">
                <i-icon
                  icon="iconzhifubao"
                  class="middle mr-10"
                  type="single"
                  size="60rpx"
                  color="#02A9F1"
                ></i-icon>
                支付宝支付
              </view>
              <view class="right"><radio value="1" color="#FBD220" /></view>
            </view>
          </label>
          <label>
            <view class="radio-item">
              <view class="left">
                <i-icon
                  icon="iconweixin1"
                  class="middle mr-10"
                  type="single"
                  size="56rpx"
                  color="#09BB07"
                ></i-icon>
                微信支付
              </view>
              <view class="right"><radio value="0" color="#FBD220" /></view>
            </view>
          </label>
          <label>
            <view class="radio-item">
              <view class="left">
                <i-icon
                  icon="iconyue"
                  class="middle mr-10"
                  type="single"
                  size="60rpx"
                  color="#FBB000"
                ></i-icon>
                余额支付
              </view>
              <view class="right"><radio value="2" color="#FBD220" /></view>
            </view>
          </label>
        </radio-group>
        <button class="goPay" @click="goType">确认支付</button>
      </view>
    </view>
    <view class="bottoms">
      <text>如有疑问请联系客服：</text>
      <text style="color: #fbb000" @click="call">{{
        serviceNumber.number
      }}</text>
    </view>
    <u-modal
      v-model="mShow6"
      title="温馨提示"
      content="订单系统收款略有延迟，支付成功后可刷新订单查看结果"
      cancel-text="支付失败"
      confirm-text="支付成功"
      confirm-color="#EB5C02"
      :show-cancel-button="true"
      @confirm="confirmHE"
      @cancel="mShow6 = false"
    >
    </u-modal>
    <!-- 确认弹框 -->
    <u-popup
      v-model="mShowye"
      mode="center"
      border-radius="14"
      width="600rpx"
      height="358rpx"
    >
      <view class="popup-title">确认要离开收银台？</view>
      <view class="popup-content">您的订单还未完成，请尽快支付</view>
      <view class="btnWrap flex flex-jc-c">
        <view class="left" @click="quxiaocliick"
          ><view class="inline-block">残忍离开</view></view
        >

        <view class="right" @click="$u.throttle(confirmYe, 1000)"
          >继续支付</view
        >
      </view>
    </u-popup>

    <!-- <u-modal v-model="mShowye" cancel-text="取消支付" title="温馨提示" content='请你确认是否支付'  confirm-text="确认支付" @confirm="confirmYe" ref="uModal" :async-close="true" :show-cancel-button="true" ></u-modal> -->
  </view>
</template>

<script src="./payDeposit.js"></script>
<style src="./payDeposit.scss" lang="scss" scoped></style>
